// 支持文件
@import '../../assets/scss/support';

.app-container {
  height: 100vh;
  box-sizing: border-box;
}

.goods-wapper {
  padding-bottom: 100px;
}

.goods-empty-wapper {
  background: #ffffff;
  min-height: 100%;
  box-sizing: border-box;
}

.goShopcart {
  height: 80rpx;
  position: relative;
}

.shopcar {
  display: flex;
  flex-direction: column;
  margin-left: 24rpx;
  height: 80rpx;
}

.shopcar-img {
  width: 48rpx;
  height: 48rpx;
}

.bottom-icon-box text {
  font-size: 20rpx;
  color: #8a8a8a;
  font-weight: 500;
}

.shopcar-left {
  display: inline-block;
  height: 48rpx;
}

.contact {
  width: 54rpx;
  height: 54rpx;
  background: url('%ASSETS_IMG%/l-goodsDetail-contact@2x.png') no-repeat;
  background-size: cover;
  border: none;
}

.contact::after {
  border: none;
}

.shopcar-tip {
  font-size: 24rpx;
  color: #333333;
}

.shopcar-num {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  display: inline-block; // width:44rpx;
  // height:44rpx;
  padding: 1px;
  background-color: #ff5000;
  font-size: 24rpx;
  text-align: center;
  line-height: 15px;
  color: #ffffff;
  min-width: 15px;
  height: 15px;
  border-radius: 100%;
}

.goods-info {
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 100%; // 商品名称

  .goods-name {
    font-size: 15px;
    line-height: 21px;
    padding: 16px 12px;

    .hot-price {
      vertical-align: top;
      margin-top: 3rpx;
      width: 35px;
      font-size: 10px;
      color: #f63838;
      border-radius: 3px;
      margin-right: 3px;
      border: 1px solid #f63838;
      line-height: 17px;
      height: 17px;
      font-weight: 500;
      text-align: center;
      display: inline-block;
    }

    // .goods-name-right {
    //     max-width: 304px;
    //     font-size: 15px;
    //     color: #000000;
    //     line-height: 21px;
    // }
  }

  // 商品价格以及倒计时
  .goods-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 10px 12px;

    .goods-price-left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: baseline;
      position: relative;

      .price-now {
        font-size: 17px;
        color: #f63838;
        line-height: 24px;
        font-weight: 600;
        margin-right: 5px;
      }

      .price-old {
        font-size: 12px;
        color: #999999;
        line-height: 13px;
        text-decoration: line-through;
        margin-right: 5px;
        font-weight: 500;
      }

      .discount {
        position: relative;
        right: 0px;
        bottom: 5rpx;
        padding: 0 4px;
        background-color: #f63838;
        border-radius: 7px;
        font-size: 9px;
        color: #ffffff;
        line-height: 12px;
        height: 12px;
      }
    }

    // .goods-price-right {
    //     display: flex;
    //     flex-direction: row;
    //     align-items: center;
    //     justify-content: flex-start;
    //     font-size: 13px;
    //     color: #e20012;
    //     image {
    //         width: 13px;
    //         height: 13px;
    //         margin-right: 3px;
    //     }
    // }
  }

  .price-top {
    padding: 16px 12px 0;
  }

  .countdown {
    padding: 0 12px 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    color: #FF7777;

    image {
      width: 13px;
      height: 13px;
      margin-right: 3px;
    }
  }

  .line {
    width: 100%;
    height: 1rpx;
    background-color: #e9e9e9;
  }

  .goods-info-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 11px 24rpx 0rpx 24rpx;
    font-size: 24rpx;
    color: #666666;

    .goods-info-left {
      margin-right: 40rpx;
    }

    &.bottom {
      margin-bottom: 11px;
    }
  }
}

// .goods-info {
//     font-size: $fontSize;
//     background: #fff;
//     .goods-name {
//         padding: 12px;
//         line-height: 20PX;
//         // @include borderBottom();
//     }
//     .goods-info-item {
//         @include flexbox(space-between, flex-start, row, nowrap);
//         // @include borderBottom();
//         font-size: $fontSize;
//         padding: 0 12px;
//         .goods-info-left {
//             height: 33px;
//             line-height: 33px;
//             font-weight: 600;
//             @include flexbox(flex-start, center, row, nowrap);
//             .now-price {
//                 font-size: $fontSizeLarge;
//                 // color: $colorOrange;
//                 color:#333333;
//                 font-weight: 600;
//             }
//             .old-price {
//                 margin-left: 20rpx;
//                 text-decoration: line-through;
//                 color: $colorMuted;
//                 font-size: 26rpx;
//             }
//         }
//     }
// }
.s-panel {
  background: #fff;

  .ensure{
    width: 100%;
    height: 90rpx;
  }

  .s-panel_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    font-weight: 600;

    .img {
      margin-left: 5px;
      width: 138px;
      height: 18px;
      background: url('%ASSETS_IMG%/l-special-title2@2x.png') no-repeat center center;
      background-size: contain;
    }

    .header-right {
      display: flex;

      .brand {
        display: flex;
        align-items: center;
        justify-content: center;
        // min-width: 75px;
        height: 25px;
        line-height: 25px;
        background: #F2F3F6;
        color: #3F3E3D;
        font-size: 12px;
        border-radius: 2px;
        padding: 0 5px;

        // padding-right: 5px;
        .brand-img {
          // margin: auto 5px;
          margin-right: 5px;
          height: 16px;
          width: 16px;
        }
      }

      .s-right_icon {
        background: url('%ASSETS_IMG%/c-right-arrow.png') no-repeat;
        background-size: contain;
        height: 44rpx;
        width: 44rpx;
      }
    }
  }

  .s-panel_content {
    padding-bottom: 15px;

    .notice {
      color: #ffffff;
      background: #FE0100;
      display: inline-block;
      padding: 16rpx 24rpx;
      width: 100%;
      font-size: 13px;
      font-weight: 600;
      box-sizing: border-box;
    }

    &.pro-img {
      image {
        display: flex;
        width: 100%;
      }
    }

    .hot-goods-warpper {
      box-shadow: 1px 2px 5px rgba(227, 227, 227, 0.5);
      margin-left: 12px;
    }
  }

  &.evaluate-panel {
    margin-top: 10px;
  }

  &.brand-panel {
    margin-top: 10px;
  }

  &.recommend-panel {
    margin-top: 10px;
  }

  .panel-img {
    justify-content: flex-start;
  }
}

/*底部action*/

.s-goods-action {
  @include flexbox(space-between,
    center,
    row,
    nowrap);
  height: 49px;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: -1px;
  left: 0;
  right: 0;
  border-top: 1rpx solid #eee;

  .action-left {
    width: 40%;
    height: 100%;
    @include flexbox(flex-start,
      center,
      row,
      nowrap);

    .bottom-icon-box {
      margin-left: 36rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .shopCartNum {
      position: absolute;
      right: -22rpx;
      top: -12rpx;
      display: inline-block;
      width: 44rpx;
      height: 32rpx;
      text-align: center;
      line-height: 32rpx;
      background: #ff0000;
      color: #fff;
      border-radius: 32rpx;
      font-size: 24rpx;
    }

    .numBig {
      right: -33rpx;
      width: 66rpx;
    }

    // .action-icon-warp {
    //     margin: 0 15px;
    //     .shopcar-icon {
    //         width: 22px;
    //         height: 22px;
    //         background: url('%ASSETS_IMG%/s-cart_icon@2x.png') no-repeat;
    //         background-size: cover;
    //         margin: 0 auto;
    //     } // .contact-icon {
    //     //     width: 70px;
    //     //     height: 70px;
    //     //     background: url('%ASSETS_IMG%/c-goods-server.png') no-repeat;
    //     //     background-size: cover;
    //     //     margin: 0 auto;
    //     // }
    //     .icon-text {
    //         margin-top: 2px;
    //         margin-left: 2px;
    //         font-size: $fontSizeSmaller;
    //     }
    // }
  }

  // .action-right {
  //     background: $colorOrange;
  //     color: #fff;
  //     font-size: $fontSizeLarge;
  //     font-weight: 600;
  //     height: 100%;
  //     width: 150px;
  //     @include flexbox(center,
  //     center,
  //     row,
  //     nowrap);
  // }
  .action-right {
    background: $colorOrange;
    color: #fff;
    font-size: 28rpx;
    font-weight: 600;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .share-btn {
      height: 100%;
      width: 250rpx;
      background: #333333;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .buy-btn {
      height: 100%;
      width: 250rpx;
      background: $colorOrange;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right, #FE0100, #F24870);
    }

    .share-btn1 {
      height: 100%;
      width: 250rpx;
      background: #333333;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }

    .buy-btn1 {
      height: 100%;
      width: 250rpx;
      background: $colorOrange;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(to right, #FE0100, #F24870);
      color: #ffffff;
    }
  }
}

/*底部action结束*/

.s-sku-action {
  @include border-top-radius(10px);
  background: #ffffff;
  color: #333333;
  min-height: 200px;
  text-align: left;

  .s-sku-header {
    @include flexbox(space-between,
      flex-start,
      row,
      nowrap);
    padding: 15px 12px;
    @include borderBottom;

    .thumb {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }

    .info {
      @include flexbox(flex-start,
        flex-start,
        column,
        nowrap);
      padding-right: 25px;
      font-size: $fontSizeSmall;
      font-weight: 600;

      .name {
        line-height: 20px;
      }

      .price {
        font-size: 32rpx;
        color: #333;
      }
    }

    .close {
      width: 22px;
      height: 22px;
      margin-right: -4px;
      margin-top: -4px;
      background: url('%ASSETS_IMG%/s-close_icon@2x.png') no-repeat;
      background-size: cover;
    }
  }

  .notice {
    font-size: 13px;
    color: #ffffff;
    background: #ff3d3e;
    display: inline-block;
    padding: 8px 12px;
    width: 100%;
    box-sizing: border-box;
    @include borderBottom;
  }

  .s-sku-container {
    padding: 12px;
    @include borderBottom;

    .s-sku-row__title {
      padding-bottom: 15px;
      font-size: 28rpx;
      font-weight: 600;

      .tips {
        font-size: 13px;
        color: #b9b9b9;
        margin-left: 6px;
        display: inline-block;
      }
    }

    .s-sku-row__content {
      // padding-left: 8px;
      overflow: scroll;

      .s-sku-row__item {
        display: inline-block;
        margin: 0 36rpx 15px 0;
        height: 30px; // min-width: 65px;
        padding: 18rpx 44rpx; // padding: 0 40rpx;
        min-width: 210rpx;
        text-align: center;
        line-height: 12px;
        font-size: $fontSizeSmall;
        text-align: center;
        background: #f6f6f6;
        border: 1px solid #f6f6f6;
        border-radius: 15px;
        box-sizing: border-box;

        // &:nth-child(3n+0) {
        //     margin: 0 0 15px 0;
        // } 
        // &:nth-child(4n) {
        //     margin: 0 20px 15px 0;
        // }
        &.active {
          color: #EF2211;
          border: 1px solid #EF2211;
          background: #fcf0f0;
        }
      }
    }
  }

  .s-sku-stepper-stock {
    @include flexbox(space-between,
      center,
      row,
      nowrap);
    padding: 12px;
    font-size: $fontSizeSmall;
    @include borderBottom();
  }

  .s-sku-btns {
    padding: 5px 12px;
    @include flexbox(space-between,
      flex-start,
      row,
      nowrap);

    .left {
      margin-right: 5px;
      font-size: 30rpx;
      background-color: #ffffff;
      border: 1rpx solid #EA1314;
      color: #EA1314;
      border-radius: 5px;
    }

    .right {
      margin-left: 5px;
      font-size: 30rpx;
      background-color: #EA1314;
      border: 1rpx solid #EA1314;
      border-radius: 5px;
      color: #ffffff;
    }
  }
}

/**/

.discover {
  padding: 30rpx 24rpx;
  background-color: #ffffff;
}

.discover-header {
  display: flex;
  flex-direction: row;
  height: 60rpx;
  line-height: 60rpx;
}

.photo {
  width: 60rpx;
  height: 60rpx;
  background-color: #666666;
  border-radius: 100%;
}

.photo image {
  width: 60rpx;
  height: 60rpx;
  border-radius: 100%;
}

.discover-name {
  display: inline-block;
  display: flex;
  flex-direction: column;
  width: 622rpx;
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 20rpx;
}

.name {
  color: #333333;
  font-size: 28rpx;
  line-height: 28rpx;
  margin-bottom: 10rpx;
  font-weight: 400;
}

.time {
  font-size: 24rpx;
  color: #666666;
  line-height: 24rpx;
}

.discover-banner {
  font-size: 26rpx;
  color: #333333;
  margin: 32rpx 0;
  width: 702rpx;
}

.discover-banner text {
  width: 702rpx;
  word-break: keep-all;
  word-wrap: break-word;
}

.discover-img {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.discover-img image {
  width: 204rpx;
  height: 204rpx;
  margin-right: 20rpx;
  background-color: #333;
}

.goods-info-right {
  display: flex;
}

.goods-info-right image {
  width: 44rpx;
  height: 44rpx;
}

.boss {
  display: inline-block;
  color: #df8d73;
}

.boss-price {
  font-size: 28rpx;
  color: #E8CA87;
}

.border-none {
  border-bottom: none;
}

.price-block {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.self-price {
  font-size: 28rpx;
  line-height: 28rpx;
  color: #dabd72;
  margin-left: 20rpx;
}

.goods-num {
  font-weight: 600;
}

.iphoneX {
  padding-bottom: 68rpx;
}

.evaluateNum {
  font-size: 24rpx;
  color: #ff5000;
  margin-left: 4rpx;
  font-weight: normal;
}

.l-detail-countdown {
  font-size: 28rpx;
  color: #686868;
  padding: 10rpx 24rpx;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-content: space-between;
  background-color: #f8f3e5;
}

.l-detail-countdown text {
  display: inline-block;
  width: 44rpx;
  height: 44rpx;
  background-color: #464552;
  border-radius: 8rpx;
  color: #ffffff;
  font-size: 28rpx;
  text-align: center;
  line-height: 44rpx;
}

.goods-none {
  background-color: #f3f3f3;
  padding: 50px 0 !important;

  text {
    color: #A2A2A2 !important;
    font-size: 12px !important;
    margin-top: 15px !important;
  }
}

.guide-goods-detail {
  bottom: 415rpx !important;
}

.borderBottom {
  @include borderBottom();
}

/*小轮播*/

.small-swiper-warpper {
  background: #ffffff;
  padding-bottom: 16px;

  .special-title {
    margin: 0 12px;
    display: flex;
    align-items: center;
    height: 49px;
    line-height: 49px;

    text {
      color: #383838;
      font-size: 16px;
      font-weight: bold;
    }

    .img {
      margin-left: 5px;
      width: 138px;
      height: 18px;
      background: url('%ASSETS_IMG%/l-special-title2@2x.png') no-repeat center center;
      background-size: contain;
    }
  }
}

//快抢关联专场
.activity {
  width: 357px;
  height: 36px;
  padding: 7px 6px 12px 12px;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;

  .activity-left {
    width: 35px;
    height: 32px;
    background-color: #d8d8d8;
    margin-right: 10px;
  }

  .activity-center {
    width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .activity-center-top {
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    .activity-center-bottom {
      margin-top: 2px;
      font-size: 10px;
      color: #999999;
      line-height: 14px;
    }
  }

  .activity-right {
    width: 22px;
    height: 22px;
    background: url('%ASSETS_IMG%/l-seckilldetail-right@2x.png') no-repeat center center;
    background-size: contain;
    margin-left: 10px;
  }
}

.detail-top {
  width: 351px !important;
  height: 105px;
  margin: 0 12px 11px;
}